<ng-template #tabResultsTemplate>
    Results{{ results?.length > 0 ? ' ('+results.length+')' : '' }}
</ng-template>

<ng-template #tabTestsTemplate>
    <div class="tests">
        Tests
        <span class="ok" *ngIf="tests && tests.ok > 0">
            <span nz-icon nzType="check" nzTheme="outline"></span>{{tests.ok}}
        </span>
        <span class="skipped" *ngIf="tests && tests.skipped > 0">
            <span nz-icon nzType="warning" nzTheme="fill"></span>{{tests.skipped}}
        </span>
        <span class="ko" *ngIf="tests && tests.ko > 0">
            <span nz-icon nzType="close" nzTheme="outline"></span>{{tests.ko}}
        </span>
    </div>
</ng-template>

<ng-container *ngIf="workflowRun">
    <div class="content" [class.disableSelection]="resizing">

        <!--  GRAPH -->
        <div class="graph-wrapper">
            <div class="list">
                <a class="item" *ngFor="let run of runs; let i = index; trackBy: trackRunElement" nz-popover
                    [nzPopoverContent]="runDetails" [routerLink]="['/project', projectKey, 'run', run.id]"
                    [class.selected]="run.id === workflowRun?.id" [class.append]="!!animatedRuns[run.id]"
                    [@appendToList]="animatedRuns[run.id] ? 'append' : 'active'" (mouseenter)="onMouseEnterRun(run.id)">
                    <span [title]="'Number: ' + run.run_number" [class.success]="run.status === 'Success'"
                        [class.cancelled]="run.status === 'Cancelled'" [class.fail]="run.status === 'Fail'"
                        [class.stopped]="run.status === 'Stopped'" [class.building]="run.status === 'Building'"
                        [class.blocked]="run.status === 'Blocked'"
                        [class.skipped]="run.status === 'Skipped'">#{{run.run_number}}</span>
                    <ng-template #runDetails>
                        <div class="run-details">
                            <div class="run-avatar" [title]="'Status: ' + run.status">
                                <span *ngIf="run.status === 'Success'" class="success" nz-icon nzType="check-circle"
                                    nzTheme="outline"></span>
                                <span *ngIf="run.status === 'Cancelled'" class="cancelled" nz-icon nzType="close-circle"
                                    nzTheme="outline"></span>
                                <span *ngIf="run.status === 'Fail'" class="fail" nz-icon nzType="close-circle"
                                    nzTheme="outline"></span>
                                <span *ngIf="run.status === 'Stopped'" class="stopped" nz-icon>
                                    <svg>
                                        <path d="M 760 260 h -500 v 500 h 500 z"></path>
                                    </svg>
                                </span>
                                <span *ngIf="run.status === 'Building'" class="building" nz-icon nzType="play-circle"
                                    nzTheme="outline"></span>
                                <span *ngIf="run.status === 'Blocked'" class="blocked" nz-icon nzType="pause-circle"
                                    nzTheme="outline"></span>
                                <span *ngIf="run.status === 'Skipped'" class="skipped" nz-icon nzType="stop"
                                    nzTheme="outline"></span>
                            </div>
                            <div class="run-info">
                                <b>Ref:</b>&nbsp;{{run.contexts.git.ref}}<br />
                                <b>Commit:</b>&nbsp;{{run.contexts.git.sha?.substring(0,8)}}<br />
                                <b>Version:</b>&nbsp;{{run.contexts.cds.version}}
                            </div>
                        </div>
                    </ng-template>
                </a>
            </div>

            <div class="graph">
                <nz-page-header class="title" nzBackIcon (nzBack)="onBack()">
                    <nz-page-header-title>
                        <span style="margin-right: 10px;" title="Show workflow's runs">
                            <a [routerLink]="['/project', projectKey, 'run']"
                                [queryParams]="{workflow: workflowRun.vcs_server+'/'+workflowRun.repository+'/'+workflowRun.workflow_name}">
                                {{workflowRun.vcs_server}}/{{workflowRun.repository}}/{{workflowRun.workflow_name}}</a>
                            <span class="number">#{{workflowRun.run_number}}</span>
                        </span>
                        <nz-select *ngIf="workflowRun.run_attempt > 1 && selectedRunAttempt"
                            [ngModel]="selectedRunAttempt" (ngModelChange)="changeRunAttempt($event)" nzSize="small"
                            title="Select run attempt">
                            <nz-option *ngFor="let item of [].constructor(workflowRun.run_attempt); let i = index"
                                [nzValue]="workflowRun.run_attempt-i" [nzLabel]="workflowRun.run_attempt-i"></nz-option>
                        </nz-select>
                        <button nz-button nzType="default" nzSize="small" title="Show workflow sources"
                            (click)="openPanel('sources')"><span nz-icon nzType="file-text"
                                nzTheme="outline"></span>Sources</button>
                        <button nz-button nzType="default" nzSize="small" title="Show workflow run contexts"
                            (click)="openPanel('contexts')"><span nz-icon nzType="read"
                                nzTheme="outline"></span>Contexts</button>
                    </nz-page-header-title>
                    <nz-page-header-content>
                        <span nz-typography nzType="secondary">
                            <span *ngIf="workflowRun.contexts.cds.workflow_template">
                                <b>Template:</b>&nbsp;<a
                                    [routerLink]="['/project', workflowRun.contexts.cds.workflow_template_project_key, 'explore', 'vcs', workflowRun.contexts.cds.workflow_template_vcs_server, 'repository', workflowRun.contexts.cds.workflow_template_repository, 'workflowtemplate', workflowRun.contexts.cds.workflow_template]">
                                    {{workflowRun.contexts.cds.workflow_template_vcs_server}}/{{workflowRun.contexts.cds.workflow_template_repository}}/{{workflowRun.contexts.cds.workflow_template}}</a>
                                <span class="templateDetails" nz-icon nzType="eye" nzTheme="outline" nz-tooltip
                                    [nzTooltipTitle]="templateTooltip"></span>
                                <ng-template #templateTooltip>
                                    Repository: <a
                                        href="{{workflowRun.contexts.cds.workflow_template_repository_web_url}}"
                                        target="_blank"
                                        rel="noopener noreferrer">{{workflowRun.contexts.cds.workflow_template_repository}}</a>
                                    <br /> Commit: <a
                                        href="{{workflowRun.contexts.cds.workflow_template_commit_web_url}}"
                                        target="_blank"
                                        rel="noopener noreferrer">{{workflowRun.contexts.cds.workflow_template_sha?.substring(0,8)}}</a>
                                    <br />Ref: <a href="{{workflowRun.contexts.cds.workflow_template_ref_web_url}}"
                                        target="_blank"
                                        rel="noopener noreferrer">{{workflowRun.contexts.cds.workflow_template_ref}}</a>
                                </ng-template>
                                <br />
                            </span>
                            <span style="margin-right: 10px;">
                                <b>Repository:</b>&nbsp;<app-searchable [style]="{display:'unset'}" [fixed]="true"
                                    [link]="['/project', projectKey, 'run']"
                                    [params]="{workflow_repository: workflowRun.contexts.git.server+'/'+workflowRun.contexts.git.repository}"
                                    paramsHandling="merge">
                                    <a class="dotted" href="{{workflowRun.contexts.git.repository_web_url}}"
                                        target="_blank"
                                        rel="noopener noreferrer">{{workflowRun.contexts.git.server}}/{{workflowRun.contexts.git.repository}}</a>
                                </app-searchable>
                            </span>
                            <span style="margin-right: 10px;">
                                <b>Ref:</b>&nbsp;<app-searchable [style]="{display:'unset'}" [fixed]="true"
                                    [link]="['/project', projectKey, 'run']"
                                    [params]="{ref:workflowRun.contexts.git.ref}" paramsHandling="merge">
                                    <a class="dotted" href="{{workflowRun.contexts.git.ref_web_url}}" target="_blank"
                                        rel="noopener noreferrer"
                                        [title]="workflowRun.contexts.git.ref">{{workflowRun.contexts.git.ref}}</a>
                                </app-searchable>
                            </span>
                            <span style="margin-right: 10px;">
                                <b>Commit:</b>&nbsp;<a href="{{workflowRun.contexts.git.commit_web_url}}"
                                    target="_blank"
                                    rel="noopener noreferrer">{{workflowRun.contexts.git.sha?.substring(0,8)}}</a>
                            </span>
                            <span>
                                <b>Author:</b>&nbsp;{{workflowRun.contexts.git.author}}
                            </span>
                            <br />
                            <span>
                                <b>Version:</b>&nbsp;<span nz-typography nzCopyable
                                    nzContent="{{workflowRun.contexts.cds.version}}" [nzCopyTooltips]="null"></span>
                            </span>
                        </span>
                        <div *ngIf="workflowRun.annotations" class="annotations">
                            <ng-container *ngFor="let annotation of workflowRun.annotations | keyvalue">
                                <app-searchable [link]="['/project', projectKey, 'run']"
                                    [params]="generateAnnotationQueryParams(annotation)">
                                    <nz-tag *ngIf="annotation.value !== 'true'" nzColor="default" style="cursor: copy;"
                                        title="key: {{annotation.key}} - value: {{annotation.value}}"
                                        (click)="confirmCopyAnnotationValue($event, annotation.value)">
                                        <b>{{annotation.key}}:</b> {{annotation.value}}
                                    </nz-tag>
                                    <span *ngIf="annotation.value === 'true'" nzColor="default"
                                        title="key: {{annotation.key}} - value: {{annotation.value}}">
                                        {{annotation.key}}
                                    </span>
                                </app-searchable>
                            </ng-container>
                        </div>
                    </nz-page-header-content>
                </nz-page-header>

                <div class="controls">
                    <button *ngIf="workflowRunIsTerminated" nz-button nzType="secondary" nzSize="large"
                        title="Start new run" (click)="openRunStartDrawer()">Start new run</button>
                    <button *ngIf="workflowRunIsTerminated && hasJobsFailed" nz-button nzType="secondary" nzSize="large"
                        title="Restart failed jobs" [nzLoading]="loading.restart" (click)="clickRestartJobs()">Restart
                        failed jobs</button>
                    <button *ngIf="workflowRunIsActive" nz-button nzType="primary" nzSize="large" nzDanger
                        title="Stop workflow run" [nzLoading]="loading.stop" (click)="clickStopRun()">Stop workflow
                        run</button>
                </div>

                <app-graph [workflow]="workflowGraph" [runJobs]="jobs" [workflowRun]="workflowRun"
                    [navigationDisabled]="!!selectedItemType" (onSelectJobGate)="openPanel('gate', $event)"
                    (onConfirmJobGate)="confirmJobGate($event)" (onSelectJobRun)="openPanel('job', $event)"
                    (onSelectHook)="openPanel('hook', $event)" (onSelectJobRunRestart)="restartJob($event)"
                    (onSelectJobRunStop)="stopJob($event)" #graph></app-graph>
            </div>
        </div>

        <!--  BOTTOM PANELS -->
        <app-resizable-panel [direction]="'vertical'" minSize="200" [initialSize]="infoPanelSize"
            (onGrabbingStart)="panelStartResize()" (onGrabbingEnd)="infoPanelEndResize($event)">
            <div class="bottom-panel">
                <app-tabs [tabs]="tabs" (onSelect)="selectTab($event)" [disableNavigation]="true"></app-tabs>
                <app-run-info *ngIf="selectedTab && selectedTab.key === 'info'" [info]="workflowRunInfo"></app-run-info>
                <app-run-results *ngIf="selectedTab && selectedTab.key === 'results'" [results]="results"
                    (onSelectResult)="openPanel('result', $event)"></app-run-results>
                <app-run-tests *ngIf="selectedTab && selectedTab.key === 'tests'" [tests]="tests"
                    (onSelectTest)="openPanel('test', $event)"></app-run-tests>
            </div>
        </app-resizable-panel>
    </div>

    <!--  RIGHT PANELS -->
    <app-resizable-panel *ngIf="selectedItemType" minSize="400" [initialSize]="jobPanelSize"
        (onGrabbingStart)="panelStartResize()" (onGrabbingEnd)="jobPanelEndResize($event)"
        (dblclick)="$event.stopPropagation(); dblClickOnPanel()">
        <div class="controls">
            <div class="control" title="Close panel" (click)="clickClosePanel()">
                <span nz-icon nzType="close" nzTheme="outline"></span>
            </div>
            <div class="control" title="Expand/Reduce panel" [class.expand]="!panelExpanded"
                [class.expanded]="panelExpanded" (click)="clickExpandPanel()">
                <span nz-icon nzType="vertical-align-top" nzTheme="outline"></span>
            </div>
            <a class="control" title="Copy share link" [href]="selectedItemShareLink" #shareLink
                (click)="confirmCopy($event)">
                <span nz-icon nzType="share-alt" nzTheme="outline"></span>
            </a>
        </div>
        <app-run-job *ngIf="selectedItemType === 'job'" [workflowRun]="workflowRun"
            [jobRun]="selectedJobRun"></app-run-job>
        <app-run-gate *ngIf="selectedItemType === 'gate'" [job]="selectedJob" [run]="workflowRun"
            (onSubmit)="onGateSubmit()"></app-run-gate>
        <app-run-hook *ngIf="selectedItemType === 'hook'" [hook]="selectedHookName" [run]="workflowRun"></app-run-hook>
        <app-run-result *ngIf="selectedItemType === 'result'" [result]="selectedRunResult"></app-run-result>
        <app-run-sources *ngIf="selectedItemType === 'sources'" [run]="workflowRun"></app-run-sources>
        <app-run-contexts *ngIf="selectedItemType === 'contexts'" [run]="workflowRun"></app-run-contexts>
        <app-run-test *ngIf="selectedItemType === 'test'" [tests]="tests" [test]="selectedTest"></app-run-test>
    </app-resizable-panel>

</ng-container>